import { DrawerForm, ModalForm } from '@ant-design/pro-components';
import CommonItemSelector from '@/components/CommonItemSelector'
import '../index.less';
import { useCallback, useRef } from 'react';
import { message } from 'antd';


interface DrugModalProps {
  title: string;
  list: any;
  isDrugModal: boolean;
  multiple: boolean;
  onVisibleChange: (params: boolean) => void;
  formRef: any;
  name: string,
}

const DrugModal: React.FC<DrugModalProps> = ({
  title,
  isDrugModal,
  list,
  multiple,
  formRef,
  name,
  onVisibleChange,
}) => {
  const defaultvalue = formRef.getFieldValue()
  console.log('onVisibleChange', defaultvalue);

  const ref = useRef([])
  const onChange = useCallback((params) => {
    ref.current = params
  }, [])

  // 这里可以进行表单提交的逻辑处理
  const handleSubmit = async () => {
    onVisibleChange(false)
    const selectArr = ref.current
    console.log('selectArr', selectArr);

    const params = selectArr?.map((item) => item.name)
    try {
      await formRef.setFieldValue(name, params);
      onVisibleChange(false)
    } catch (error: any) {
      message.info(error?.message)
    }
  };

  return (
    <>
      <ModalForm
        width={1200}
        style={{ margin: '0 10px 0 ', height: '400px' }}
        title={title}
        visible={isDrugModal}
        onVisibleChange={(isShow) => onVisibleChange(isShow)}
        autoFocusFirstInput
        modalProps={{
          destroyOnClose: true,
          onCancel: () => console.log('Cancelled'),
        }}
        onFinish={handleSubmit}
      >
        <CommonItemSelector
          height={50}
          list={list}
          multiple={multiple}
          detaultValues={multiple ? defaultvalue[name] : defaultvalue[name][0]}
          onChange={onChange}
        />
      </ModalForm >
    </>
  );
};

export default DrugModal;
